<!DOCTYPE html>
<html  xmlns:th = "http://www.thymeleaf.org">
<!-- 需要加载多个外部css样式文件时，使用','隔开 如 /css/index.css,/css/home.css-->
<head th:include="commons/head::head('首页','/css/index.css')">

</head>
<body class="layui-layout-body">

<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">后台管理</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left" >
            <li class="layui-nav-item"><a href="">控制台</a></li>
            <li class="layui-nav-item"><a href="">商品管理</a></li>
            <li class="layui-nav-item"><a href="">用户</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">其它系统</a>
                <dl class="layui-nav-child">
                    <dd><a href="">邮件管理</a></dd>
                    <dd><a href="">消息管理</a></dd>
                    <dd><a href="">授权管理</a></dd>
                </dl>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    贤心
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="">退了</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree "  lay-filter="menus" id="menus">
               <!-- <li class="layui-nav-item"> &lt;!&ndash; 增加layui-nav-itemed 设定被选中&ndash;&gt;
                    <a href="javascript:;">所有商品</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" class="site-demo-active" data-url="http://www.baidu.com" data-id="baidu" data-title="百度">列表一</a></dd>
                        <dd><a href="javascript:;" class="site-demo-active" data-url="https://www.sina.com.cn/" data-id="sina" data-title="新浪">列表二</a></dd>
                        <dd><a href="javascript:;" >列表三</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">解决方案</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">列表一</a></dd>
                        <dd><a href="javascript:;">列表二</a></dd>
                    </dl>
                </li>-->

                <!--<li class="layui-nav-item" th:each="item,itemindex:${ menuList }">
                    <a href="javascript:;">${item.menuname}</a>
                    <dl class="layui-nav-child">
                        <dd th:each="child, childindex: ${item.children}">
                            <a href="javascript:;" class="site-demo-active" th:attr="data-url='${child.script}', data-id='${child.id}', data-title = '${child.menuname}'"></a>
                        </dd>
                    </dl>
                </li>-->
            </ul>
        </div>
    </div>




    <div class="layui-body" style="overflow: hidden">
        <!-- 内容主体区域 -->
        <!--
            layui-tab-brief 设定简洁风格
            layui-tab-card 设定卡片风格
        -->
       <!-- <div class="layui-tab layui-tab-brief" lay-allowClose="true">
            <ul class="layui-tab-title">
                <li class="layui-this" >标题一</li>
                <li>标题二</li>
                <li>标题三</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <table class="layui-hide" id="userlist"  lay-filter="test1"></table>
                </div>
                <div class="layui-tab-item">
                    内容2
                </div>
                <div class="layui-tab-item">内容3</div>
            </div>
        </div>-->

        <!-- 页面标签 -->
        <div style="padding: 0 0px;" >
            <div class="layui-tab layui-tab-card" lay-allowClose="true" lay-filter="tabs">
                <ul class="layui-tab-title" lay-allowClose="true" style="padding:0 10px;">
                    <li lay-id="home/console.html"  class="layui-this"><i class="layui-icon layui-icon-home"></i></li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <iframe th:replace="home::html" frameborder="0" >

                        </iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script id="barDemo" type="text/html">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="look">查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    <script id="useFlagTpl" type="text/html">
        {{# if(d.useFlag === 'Y'){ }}
            <span>{{ '正常' }}</span>
        {{# } else { }}
            {{ '停用' }}
        {{# } }}
    </script>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
    </div>
</div>

<!-- 提示：如果是采用非模块化方式，此处可换成：layui.all.js -->
<script th:src="@{/layui/layui.js}"></script>
<script>
    //JavaScript代码区域
    //如果内置的模块本身是依赖jquery，你无需去use jquery，所以上面的写法其实可以是：
    layui.use(['element', 'layer', 'table'], function(){
        var element = layui.element;  //元素操作
        var layer = layui.layer;  //弹层
        var table = layui.table;  //表格
        var $ = layui.$;  ////由于layer弹层依赖jQuery，所以可以直接得到， 重点处。

        //向世界问个好
        //layer.msg('Hello World');

        $.ajax({
            url:'menu/getMenuTree',
            method: 'POST',
            success: function(res){
                var html = '';
                for(var i = 0; i < res.length; i++){
                    var _li = '<li class="layui-nav-item"><a href="javascript:;"><i class="layui-icon '+ res[i].menuIcon +'" style="padding-right: 2px;"></i>' + res[i].menuName + '</a>'
                    if(res[i].children.length > 0){
                        _li += '<dl class="layui-nav-child">';
                        for(var j = 0; j < res[i].children.length; j++){
                            //console.log(res[i].children);
                            var url = res[i].children[j].script,id = res[i].children[j].id, title = res[i].children[j].menuName, icon = res[i].children[j].menuIcon;

                            _li += '<dd><a href="javascript:;" class="site-demo-active" ' +
                                'onclick="addTabs(\''+ url +'\',\''+ id +'\',\''+ title +'\')" ' +
                                'data-url="'+ url +'" data-id="'+ id +'" data-title = "'+ title +'"><i class="layui-icon '+ icon +'" style="padding-right: 5px;"></i>'+ title +'</a></dd>';

                            //console.log(_li);
                        }
                        _li += '</dl>'
                    }
                    _li += '</li>'
                    html += _li;
                }

                $('#menus').html(html);
                element.render('menus');
            }
        });

        table.render({
            elem: '#userlist',
            // height: 312,   //默认情况。高度随数据列表而适应，表格容器不会出现纵向滚动条
            //height: 'full-100', //高度最大化减去差值
            url: '/user/list',
            toolbar: 'default', //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": 0, //解析接口状态
                    "msg": '', //解析提示文本
                    "count": res.totalElements, //解析数据长度
                    "data": res.content //解析数据列表
                };
            },
            page: true,  //开启分页
            limits:[10,20,30,40,50], //每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。优先级低于 page 参数中的 limits 参数。
            cols: [ //表头
                        [
                            {type: 'checkbox', fixed: 'left'},  //fixed  left：固定在左 right：固定在右， 一旦设定不随滚动条滚动而滚动
                            {field:'uid', title:'uid', sort: true, fixed: 'left',  hide:true}, //hide 表示隐藏列
                            {field:'userName', title:'用户编码', sort:true, unresize: true}, //unresize 是否禁用拖拽列宽
                            {field:'realName', title:'用户名', sort:true, edit:'text'}, //edit 单元格编辑类型（默认不开启）目前只支持：text（输入框）
                            {field:'email', title:'邮箱', sort:true},
                            {field:'phone', title:'联系方式', sort:true},
                            {field:'birthday', title:'出生日期', sort:true},
                            {field:'useFlag', title:'使用状态', sort:true, templet: '#useFlagTpl'},
                            {field:'createTime', title:'创建时间', sort:true},
                            {fixed: 'right',title:'操作', width:200, align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
                        ]
                    ],
            text: {  //设置无数据是提示信息
                none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
            },
            skin: 'row', //行边框风格   row 列边框风格  nob 无边框风格
            even: true, //开启隔行背景  false 关闭隔行背景
            size: 'sm' //小尺寸的表格   lg 大尺寸表格
        });

        //监听头工具栏事件
        table.on('toolbar(test1)', function(obj){
            console.log(obj.event);
            var checkStatus = table.checkStatus(obj.config.id)
                ,data = checkStatus.data; //获取选中的数据 ,  data类型为数组，可以通过JSON.stringify(data)转化后查看

            switch(obj.event){
                case 'add':
                    $.post('/user/create',null, function(res){
                        if(res.uid){
                            layer.msg('用户创建成功！');

                            //执行重载
                            tbreload();
                        }
                    });
                    break;
                case 'update':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else if(data.length > 1){
                        layer.msg('只能同时编辑一个');
                    } else {
                        layer.alert('编辑 [id]：'+ checkStatus.data[0].uid);
                    }
                    break;
                case 'delete':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else {
                        //layer.msg(JSON.stringify(data));
                        var uids = new Array(data.length);
                        for(var i = 0; i < data.length; i++){
                            uids[i] = data[i].uid;
                        }

                        $.post('/user/del', {'uids': uids}, function (res) {
                            if(res){
                                layer.msg('删除成功！');
                                //执行重载
                                tbreload();
                            }
                        });
                    }
                    break;
            };
        });

        //监听工具条
        table.on('tool(test1)',function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data, //获取当前行数据
            layEvent = obj.event; //获取lay-event对应的值
           // var tr = obj.tr; //获取当前行tr的DOM对象
            //layer.msg('test');
            if(layEvent === 'look'){
                layer.msg('查看');
            }else if(layEvent === 'edit'){
                layer.msg('编辑');
            }else{
                var uids = new Array(1);
                uids[0] = data.uid;
                $.post('/user/del', {'uids':uids}, function (res) {
                    if(res){
                        layer.msg('删除成功！');
                        //执行重载
                        tbreload();
                    }
                });
            }
        });

        //监听单元格编辑
        table.on('edit(test1)',function (obj) {
            var value = obj.value;  //获取修改后的值
            var data = obj.data;  //获取所在行所有键值
            var field = obj.field;  //获取修改的字段
            var data1 = JSON.stringify(data);

            layer.msg(typeof(data));

            $.post('/user/update', data, function (res) {
                if(res){
                    layer.msg('用户更新成功！');

                    tbreload();
                }
            });
            
        });

        function tbreload(){
            //执行重载
            table.reload('userlist',{
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        }

    });


    function addTabs(url, id, title){
        //console.log(url + '_'+id+'_'+title);
        var $ = layui.$;
        if ($(".layui-tab-title li[lay-id='" + title + "']").length <= 0) {
            layui.element.tabAdd('tabs', {
                title: title,
                content: '<iframe src="' + url + '" frameborder="0" style="width:100%;height:745px;"></iframe>',
                id: title //规定好的id
            });
        }
        //最后不管是否新增tab，最后都转到要打开的选项页面上
        layui.element.tabChange('tabs',title);
    }

</script>

</body>
</html>